<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>FineUICore扩展（二） | 没想好的个人博客</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
   <!-- Font Awesome CSS-->
   <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">

   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="shortcut icon" href="https://shixixiyue.gitee.io//favicon.ico?v=1709791195950">
<link rel="stylesheet" href="https://shixixiyue.gitee.io//styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://jsd.onmicrosoft.cn/npm/vue/dist/vue.js"></script>


<style>
  .hljs-ln{
    padding-bottom: 1.2rem;
    margin: 0rem !important;
  }
  .hljs-ln td {
    border: none !important;
    padding: 2px 6px !important;
    line-height: 1.2rem;
    font-size: 1rem;
  }
  .hljs-ln tr td:first-child  {
    color: cadetblue;
    border-right: 1px solid !important;
  }
  .hljs-ln tr {
    border: none !important;
  }
</style>

    <meta name="description" content="上一篇给F增加了扩展，后台生成了三个按钮放到了F.Toolbar().Items()中，今天把前台触发方法写好，让生成的按钮用起来








导言
1. 为Grid扩展一个Window
2. 按钮触发实现









导言
上一..." />
    <meta name="keywords" content="FineUICore" />
  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://shixixiyue.gitee.io/">
        <img src="https://shixixiyue.gitee.io//images/avatar.png?v=1709791195950" class="site-logo">
        <h1 class="site-title">没想好的个人博客</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/4gOKry8Qv/" class="site-nav">
            .Net Core
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/njETBpqXu/" class="site-nav">
            FineUICore
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/XyXyeLOBB" class="site-nav">
            读书笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/TyVX6hfCJ" class="site-nav">
            Vue笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/3Hz2sPtzO/" class="site-nav">
            产品
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/Db1wShB_E" class="site-nav">
            其他
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            一一一一一一一一一
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//archives" class="site-nav">
            文章归档
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tags" class="site-nav">
            全部标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      没事啥都说
    </div>
    <div class="site-footer">
      QQ：<a href="tencent://message/?uin=935732994&Site=''&Menu=yes">935732994<a/> <a href="http://beian.miit.gov.cn">京ICP备2024045283号<a/> | <a class="rss" href="https://shixixiyue.gitee.io//atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">FineUICore扩展（二）</h2>
            <div class="post-date">2019-03-28
            
                
                  <a href="https://shixixiyue.gitee.io/tag/njETBpqXu/" class="tag">
                    FineUICore
                  </a>
                
            </div>
            
            <div class="post-content" v-pre>
              <p>上一篇给F增加了扩展，后台生成了三个按钮放到了F.Toolbar().Items()中，今天把前台触发方法写好，让生成的按钮用起来</p>
<!-- more -->
<p><ul class="markdownIt-TOC">
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#%E5%AF%BC%E8%A8%80">导言</a></li>
<li><a href="#1-%E4%B8%BAgrid%E6%89%A9%E5%B1%95%E4%B8%80%E4%B8%AAwindow">1. 为Grid扩展一个Window</a></li>
<li><a href="#2-%E6%8C%89%E9%92%AE%E8%A7%A6%E5%8F%91%E5%AE%9E%E7%8E%B0">2. 按钮触发实现</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<blockquote>
<h4 id="导言">导言</h4>
<p>上一篇给F增加了扩展，后台生成了三个按钮放到了F.Toolbar().Items()中，今天把前台触发方法写好，让生成的按钮用起来</p>
</blockquote>
<p>在这之前要定义新增修改删除按钮都干什么，我习惯于把修改页面单独用F.Window控件弹出，然后用url传值把选中的ID传到编辑页面，所以，新增就是弹出空页面（不传参数），修改就弹出页面（传选中的ID），删除按钮直接触发后台方法，前台就用F.doPostBack(url, {});</p>
<h4 id="1-为grid扩展一个window">1. 为Grid扩展一个Window</h4>
<p>单独一个Window控件？当然不需要，Grid自带一个window是我想要的，要用一行代码就建一个Window控件，前台要这样：</p>
<pre><code>.EditWindow(@Url.Content(&quot;~/Grid/GridEdit&quot;), 450, 350, &quot;表格1修改&quot;)
</code></pre>
<p>我只要制定URL，大小，标题，就足够了，为F.Grid扩展，鼠标点击F.Grid()按F12，飞，这次没有重载</p>
<pre><code>//
// 摘要:
//     表格控件扩展
public GridExtension Grid();
</code></pre>
<p>GridExtension就是这个，为他做扩展：</p>
<pre><code>/// &lt;summary&gt;
/// 为Grid 增加 窗体 
/// &lt;/summary&gt;
/// &lt;param name=&quot;f&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;url&quot;&gt;修改页面的地址&lt;/param&gt;
/// &lt;param name=&quot;width&quot;&gt;宽&lt;/param&gt;
/// &lt;param name=&quot;height&quot;&gt;高&lt;/param&gt;
public static GridExtension EditWindow(this GridExtension f, string url, int width, int height)
{}
</code></pre>
<p>Window控件作为属性动态输出，我选择js，所以Window的显示需要扩展F.Grid，这回是js扩展：</p>
<pre><code>if (F.Grid) {
    $.extend(F.Grid.prototype, {
        editWidth: 800,//修改窗口的宽
        editHeight: 650,//修改窗口的高
        editTitle: &quot;编辑&quot;,//修改窗口的标题
        //显示编辑页面
        showEdit: function (b, data, title, w, h) {
            var t = this;
            //默认属性
            var editurl = F.ui[t.id].editurl;
            title = title || t.editTitle;
            w = w || t.editWidth;
            h = h || t.editHeight;
            //没有地址返回
            if (!editurl) { return; }
            //增加随机参数
            if (editurl.indexOf('?') &lt; 0) {
                editurl += &quot;?_reg=&quot; + Math.random();
            }
            //是否验证选择项
            if (b) {
                var selectids = F.ui[t.id].getSelectedRows();
                if (selectids.length != 1) {
                    notifyEx(&quot;请选择一行进行编辑&quot;);
                    return;
                }
                //将选择的id作为参数拼接
                editurl += &quot;&amp;id=&quot; + selectids[0];
            }
            //其他的参数 [a=x,b=x]
            if (data) {
                if ($.isArray(data)) {
                    for (var d in data) {
                        editurl += &quot;&amp;&quot; + d;
                    }
                } else {
                    editurl += &quot;&amp;&quot; + data;
                }
            }
            //执行显示
            F.ui[t.id + 'GridEdit'].show(editurl, title, w, h);
        }
    });
}
</code></pre>
<p>js执行F.ui.Grid.showEdit() 就可以了。下面补齐FineUIEx.cs，注意EditWindow方法的多中重载，满足不同场景</p>
<pre><code>/// &lt;summary&gt;
/// 为Grid 增加 窗体
/// &lt;/summary&gt;
/// &lt;param name=&quot;f&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;b&quot;&gt;是否启用修改页面&lt;/param&gt;
/// &lt;param name=&quot;url&quot;&gt;修改页面地址&lt;/param&gt;
private static GridExtension EditWindow(this GridExtension f, bool b, string url)
{
    StringBuilder str = new StringBuilder();
    if (b)
    {
        str.Append(&quot;F.appendFormNode('&lt;div class=\&quot;f-window-wrap\&quot; id=\&quot;&quot; + f.Source.ID + &quot;GridEdit_wrapper\&quot;&gt;&lt;/div&gt;');&quot;);
        str.Append(&quot;new F.Window({&quot;);
        str.Append(&quot;id: '&quot; + f.Source.ID + &quot;GridEdit',&quot;);
        str.Append(&quot;renderTo: '#&quot; + f.Source.ID + &quot;GridEdit_wrapper',&quot;);
        str.Append(&quot;hidden: true,&quot;);
        str.Append(&quot;width: 1000,&quot;);
        str.Append(&quot;height: 600,&quot;);
        str.Append(&quot;iframe: true,&quot;);
        str.Append(&quot;title: '编辑',&quot;);
        str.Append(&quot;iconFont: 'edit',&quot;);
        str.Append(&quot;resizable: true,&quot;);
        str.Append(&quot;target: '_self',&quot;);
        str.Append(&quot;maximizable: true,&quot;);
        str.Append(&quot;closeAction: 'hide'&quot;);
        str.Append(&quot;});&quot;);
    }
    if (!string.IsNullOrEmpty(url))
    {
        str.Append(&quot;F.ui.&quot; + f.Source.ID + &quot;.editurl = '&quot; + url + &quot;';&quot;);
    }
    PageContext.RegisterStartupScript(str.ToString());
    return f;
}

/// &lt;summary&gt;
/// 为Grid 增加 窗体
/// &lt;/summary&gt;
/// &lt;param name=&quot;f&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;b&quot;&gt;&lt;/param&gt;
public static GridExtension EditWindow(this GridExtension f, bool b)
{
    return f.EditWindow(true, &quot;&quot;);
}

/// &lt;summary&gt;
/// 为Grid 增加 窗体
/// &lt;/summary&gt;
/// &lt;param name=&quot;f&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;url&quot;&gt;修改页面的地址&lt;/param&gt;
public static GridExtension EditWindow(this GridExtension f, string url)
{
    return f.EditWindow(true, url);
}
/// &lt;summary&gt;
/// 为Grid 增加 窗体 
/// &lt;/summary&gt;
/// &lt;param name=&quot;f&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;url&quot;&gt;修改页面的地址&lt;/param&gt;
/// &lt;param name=&quot;width&quot;&gt;宽&lt;/param&gt;
/// &lt;param name=&quot;height&quot;&gt;高&lt;/param&gt;
public static GridExtension EditWindow(this GridExtension f, string url, int width, int height)
{
    StringBuilder str = new StringBuilder();
    str.Append(&quot;F.ui.&quot; + f.Source.ID + &quot;.editWidth=&quot; + width + &quot;;&quot;);
    str.Append(&quot;F.ui.&quot; + f.Source.ID + &quot;.editHeight=&quot; + height + &quot;;&quot;);
    PageContext.RegisterStartupScript(str.ToString());
    return f.EditWindow(true, url);
}


/// &lt;summary&gt;
/// 为Grid 增加 窗体 
/// &lt;/summary&gt;
/// &lt;param name=&quot;f&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;url&quot;&gt;修改页面的地址&lt;/param&gt;
/// &lt;param name=&quot;width&quot;&gt;宽&lt;/param&gt;
/// &lt;param name=&quot;height&quot;&gt;高&lt;/param&gt;
public static GridExtension EditWindow(this GridExtension f, string url, int width, int height,string title)
{
    StringBuilder str = new StringBuilder();
    str.Append(&quot;F.ui.&quot; + f.Source.ID + &quot;.editWidth=&quot; + width + &quot;;&quot;);
    str.Append(&quot;F.ui.&quot; + f.Source.ID + &quot;.editHeight=&quot; + height + &quot;;&quot;);
    str.Append(&quot;F.ui.&quot; + f.Source.ID + &quot;.editTitle='&quot; + title + &quot;';&quot;);
    PageContext.RegisterStartupScript(str.ToString());
    GridExtension gex = f.EditWindow(true, url);
    return gex;
}
</code></pre>
<h4 id="2-按钮触发实现">2. 按钮触发实现</h4>
<p>有了编辑窗口，下面写js方法为让按钮触发就行了，新增修改弹出编辑窗口，代码如下</p>
<pre><code>//新增 修改 删除 由后台自动引用，通过传入的GirdID执行前台或者后台方法
//新增
GridAdd_click = function (gridid) {
    //下回说这句
    eval(&quot;var fun;try{fun=&quot; + gridid + &quot;new_Click;}catch(ex){}&quot;);
    if (fun) {
        fun(F.ui[gridid]);
    } else {
        //显示
        F.ui[gridid].showEdit();
    }
};
//修改
GridEdit_click = function (gridid) {
    //下回说这句
    eval(&quot;var fun;try{fun=&quot; + gridid + &quot;edit_Click;}catch(ex){}&quot;);
    //得到选择的ID 判断
    var selectids = F.ui[gridid].getSelectedRows();
    if (selectids.length != 1) {
        notifyEx(&quot;请选择一行进行编辑&quot;);
        return;
    }
    if (fun) {
        fun(F.ui[gridid], selectids[0]);
    } else {
        //显示
        F.ui[gridid].showEdit(true);
    }
}

//删除 这里要注意，删除的url要从程序传 后台需要有删除方法 gridid + 'Del_Click' 命名
GridDel_click = function (pburl, gridid) {
    eval(&quot;var fun;try{fun=&quot; + gridid + &quot;delete_Click;}catch(ex){}&quot;);
    var selectids = F.ui[gridid].getSelectedRows();
    if (selectids.length == 0) {
        notifyEx(&quot;请选择一行进行编辑&quot;);
        return;
    }
    confirmEx(&quot;是否删除选中项&quot;, function () {
        if (fun) {
            fun(F.ui[gridid], selectids);
        } else {
            F.doPostBack(pburl + &quot;/&quot; + gridid + 'Del_Click', {
                id: selectids,
                fields: F.ui[gridid].fields
            });
        }
    });
}
</code></pre>
<p>将DefaultGridBtn方法补齐，实现触发前台的js</p>
<pre><code>/// &lt;summary&gt;
/// 返回默认Grid增删改按钮的默认配置 参数（GridID,增加的其他按钮）
/// new_Click  edit_Click delete_Click
/// &lt;/summary&gt;
/// &lt;param name=&quot;F&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;gridid&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;items&quot;&gt;&lt;/param&gt;
/// &lt;returns&gt;&lt;/returns&gt;
public static ControlBase[] DefaultGridBtn(this UIExtension&lt;dynamic, dynamic&gt; F, string gridid, params IControlBaseExtension[] items)
{
    //var F = new UIExtension&lt;dynamic, dynamic&gt;();
    List&lt;ControlBase&gt; DefaultBtn = new List&lt;ControlBase&gt;();
    var v = F.Button().ID(gridid + &quot;new&quot;).Text(&quot;新增&quot;).OnClientClick(&quot;GridAdd_click('&quot; + gridid + &quot;')&quot;).IconFont(IconFont.Plus).Source;
    DefaultBtn.Add(v);
    v = F.Button().ID(gridid + &quot;edit&quot;).Text(&quot;修改&quot;).OnClientClick(&quot;GridEdit_click('&quot; + gridid + &quot;')&quot;).IconFont(IconFont.Pencil).Source;
    DefaultBtn.Add(v);
    string url = ((Microsoft.AspNetCore.Http.Internal.DefaultHttpRequest)((Microsoft.AspNetCore.Http.DefaultHttpContext)((Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper)F.CurrentHtmlHelper).ViewContext.HttpContext).Request).Path;
    v = F.Button().ID(gridid + &quot;delete&quot;).OnClientClick(&quot;GridDel_click('&quot; + url + &quot;','&quot; + gridid + &quot;')&quot;).Text(&quot;删除&quot;).IconFont(IconFont.Minus).Source;
    DefaultBtn.Add(v);
    foreach (var t in items)
    {
        DefaultBtn.Add(t.Source);
    }
    return DefaultBtn.ToArray();
}


/// &lt;summary&gt;
/// 返回默认Grid增删改按钮的默认配置 参数（GridID,增加的其他按钮）
/// new_Click  edit_Click delete_Click
/// &lt;/summary&gt;
/// &lt;param name=&quot;f&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;gridid&quot;&gt;&lt;/param&gt;
/// &lt;param name=&quot;items&quot;&gt;&lt;/param&gt;
/// &lt;returns&gt;&lt;/returns&gt;
public static ControlBase[] DefaultBeforGridBtn(this UIExtension&lt;dynamic, dynamic&gt; f, string gridid, params IControlBaseExtension[] items)
{
    var F = new UIExtension&lt;dynamic, dynamic&gt;();
    List&lt;ControlBase&gt; DefaultBtn = new List&lt;ControlBase&gt;();
    foreach (var t in items)
    {
        DefaultBtn.Add(t.Source);
    }
    var v = F.Button().ID(gridid + &quot;new&quot;).Text(&quot;新增&quot;).OnClientClick(&quot;GridAdd_click('&quot; + gridid + &quot;')&quot;).IconFont(IconFont.Plus).Source;
    DefaultBtn.Add(v);
    string url =((Microsoft.AspNetCore.Http.Internal.DefaultHttpRequest)((Microsoft.AspNetCore.Http.DefaultHttpContext)((Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper)f.CurrentHtmlHelper).ViewContext.HttpContext).Request).Path;
    v = F.Button().ID(gridid + &quot;edit&quot;).Text(&quot;修改&quot;).OnClientClick(&quot;GridEdit_click('&quot; + gridid + &quot;')&quot;).IconFont(IconFont.Pencil).Source;
    DefaultBtn.Add(v);
    v = F.Button().ID(gridid + &quot;delete&quot;).OnClientClick(&quot;GridDel_click('&quot; + url + &quot;','&quot; + gridid + &quot;')&quot;).Text(&quot;删除&quot;).IconFont(IconFont.Minus).Source;
    DefaultBtn.Add(v);
    return DefaultBtn.ToArray();
}
</code></pre>
<blockquote>
<p>具体效果，可以在<a href="http://140.143.155.224:8086/#/Grid/GridBtn">FineUIMVC扩展</a>中查看。</p>
</blockquote>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://shixixiyue.gitee.io/tag/njETBpqXu/" class="tag">
                    FineUICore
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://shixixiyue.gitee.io/fineuicore-kuo-zhan-yi/">
                  <h3 class="post-title">
                    FineUICore扩展（一）
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  <script src="//jsd.onmicrosoft.cn/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    //hljs.registerLanguage('mermaid', window.hljsDefineMermaid);
  </script>
  <script src="//jsd.onmicrosoft.cn/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initLineNumbersOnLoad({
      singleLine: true
    });
  </script>
 <script src="https://jsd.onmicrosoft.cn/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
    });
  </script>





  </body>
</html>
